<template>
	<div class="mall_goods_pics">
		<h1 class="mall_goods_pics_title">商品图片</h1>
		<div class="mall_goods_pics_items" v-for="(item, index) in goods()">
			<LazyImg src="http://i9.hexunimg.cn/mobile_show/image/20150706/20150706155449_859.png" :dataSrc="item" />
		</div>
	</div>
</template>
<script>
	import LazyImg from "../../components/common/lazy-img.vue";
	export default{
		name: "MallGoodsPics",
		props:["shopid", "id", "cid"],
		data: function(){
			let that = this;
			return{
				goods:() => {
					let pics = [];
					this.$store.state.goods.each((i, item) => {
						if (item.id === that.id && item.cid === that.cid && item.shopid === that.shopid){
							pics = pics.concat(item.pics);
							return false;
						}
					})
					return pics;
				}
			}
		},
		components:{
			LazyImg
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	.mall_goods_pics{
		margin:10/@base 0 0;
		background-color: #fff;
		h1{
			&.mall_goods_pics_title{
				padding:20/@base;
				font-size: 22/@base;
				font-weight: 400;
				border-bottom: 1/@base solid #ccc;
				border-left:5/@base solid #ff0000;
			}
		}
		div{
			&.mall_goods_pics_items{
				padding:0;
				margin:0;
				span{
					display: block;
					img{
						width:100%;
						display: block;
					}
				}
			}
		}
	}
</style>